Skip to main content

Intro to Create React App

Learning Objectives#

  • Learn about Create React App
  • Learn what some of the pros and cons of Create React App are
  • Learn how to build an app with Create React App

It's 2020 Y'all#

If you've googled anything about what to learn to be a web developer, you've likely been overwhelmingly crushed by the number of tools, technologies and buckets full of acronym soup.

All of these tools are meant to solve problems. But with too many tools it can be a problem in and of itself. Which one(s) do you learn? Additionally, as new web devs a lot of the tools can seem like total magic and it can be really hard to to figure out what is what and it can even impede learning when you take on too much too fast. Especially when the documentation is not very good.

So we've been really selective about which tools we teach. Thinking about what be will serve you post-course.

Create React App is built buy facebook and it is meant for:

  • Learning React in a comfortable and feature-rich development environment (good errors! warnings, notes about best practices, hot reloading, zero configuration)
  • Starting new single page applications
  • Creating Examples with react for your libraries and components

More info

Create React App isn't the best choice for:

  • a sandbox where you just want to try some samples out (try a simple html page like we did yesterday or a react sandbox - linked above)
  • A mostly static site (portfolio, blog) - try Gatsby!
  • Server side rendering (yes! With a front-end framework! What is next? Cats and dogs being friends?!) - look into Next.js

Takeaway - soon you'll be on your own and you'll be trying to learn new things and get ready for job interviews. How do you figure out what to learn?

  • figure out what you want to build and THEN figure out the right tools
  • Start small and then add what you need
  • Look at the job market and learn something that seems to be popular in the area

Let's get started#

  • npx create-react-app react_tac_toe
  • cd react_tac_toe
  • rm -rf .git - because we are in the class repository - no git reps inside other git repos!
  • open a new tab in terminal
  • npm start
  • in the other open tab atom .

Let's look at our folders

The public folder holds static assets like the favicon and the index.html that will load in the browser

The src folder has a lot new things

  • App.css - a different way to organize and use CSS than what we are used to. As a bonus you can learn this way or we can just link our CSS like we always have been or you can work in the index.css file

  • App.js the main React component, we'll be writing in here

  • App.test.js - we haven't gotten a chance to dive into testing but if you look at the code, in summary it says if the app doesn't crash load it. If the app does crash a lot of things happen but they require some deeper poking around

  • index.css - if you do your css in here, it will be most familiar to what we've already been doing in the course.

  • index.js - this file has some magic going in in it. Suffice to say, if you create React components in the src folder, they will magically work

  • logo.svg-that's that spinning react logo you see in the browser. SVG is a really great technology worth exploring sometime later...

  • serviceWorker.js, rather than an express app serving our web pages, this service worker is helping us interact with our app in the browser. More info - we are going to go ahead and call this part 'magic' since we don't have time to jump down this rabbit hole.

Note: if you need to add a dependency you'd just run npm install react-router-dom or any other dependency you might want.

Let's Get Coding#

  • Open the src folder
  • open the App.js file
  • remove the text inside the p tag and put some of your own words

  • save the file
  • look at the browser

Notice! you didn't have to reload the browser! 🎉

Make This App Our Own#

Let's remove all the create react app showcase stuff and rewrite our component to be a class. There are a few ways to make react components. We're going to stick with classes. Later, when you feel more confident you can explore different ways to write them

App.js
import React from "react";
class App extends React.Component {  render() {    return <div></div>;  }}
export default App;